<template>
	<view>
		<view>
			<fui-form ref="form">
				<fui-form-item label="通告类型" labelSize="28">
					<view style="float:right">
						<text>{{formData.ClassName}}</text>
						<fui-icon name="lock" size="28"></fui-icon>
					</view>
				</fui-form-item>
				<fui-form-item label="面向身份" labelSize="28" v-if="publicRoleSuo">
					<view style="float:right">
						<text>{{formData.publicRole['text']}}</text>
						<fui-icon name="lock" size="28"></fui-icon>
					</view>
				</fui-form-item>
				<fui-form-item label="面向身份" labelSize="28" v-else @click="showRole">
					<view style="float:right">
						<text>{{formData.publicRole['text']}}</text>
						<fui-icon name="arrowright" size="28"></fui-icon>
					</view>
				</fui-form-item>
				<fui-form-item label="面向地区" labelSize="28">
					<view
						style="float:right;display: flex;flex-direction: row;justify-content: flex-end;align-items: center;">
						<fui-input :borderBottom="false" readonly placeholder="请选择面向地区" :padding="[10,10,10,10]"
							size="30" textAlign="right" v-model="formData.city" @click="showCity"></fui-input>
						<i style="padding: 0 8rpx;color: #ccc;">|</i>
						<view class="fui-align__center"
							style="display:flex;flex-direction: row;justify-content: center;align-items: center;">
							<text class="fui-text" style="margin-right: 10rpx;"
								:style="[{color:isChecked && !formData.city ?'#000':'#ccc'}]">不限</text>
							<!-- <fui-checkbox value="1" checked></fui-checkbox> -->
							<checkbox style="transform: scale(0.7,0.7);" :checked="isChecked"
								activeBackgroundColor="#fff812" @click="checkedChange" />
						</view>
					</view>
				</fui-form-item>
				<fui-form-item label="报名截止日期" labelSize="28" label-width="240" arrow>
					<view style="float:right;width:200rpx">
						<fui-input :borderBottom="false" readonly placeholder="报名截止日期" :padding="[10,10,10,10]"
							size="30" textAlign="right" v-model="formData.NoticeEndTime"
							@click="showBirthday"></fui-input>
					</view>
				</fui-form-item>
				<fui-form-item label="性别要求" labelSize="28">
					<!-- <view style="float:right">{{formData.sex['text']}}</view> -->
					<view>
						<view v-for="(item,index) in sexs" :key="index" class="sexLabel"
							:style="{background:(formData.sex.value === item.value?'#FFDD00':'')}"
							@click="changeSex(item)">
							{{ item.text }}
						</view>
					</view>
				</fui-form-item>
				<fui-form-item label="通告费用" labelSize="28" arrow>
					<!-- <view style="float:right" @click="showPrice">{{formData.price['text']}}</view> -->
					<fui-input :borderBottom="false" readonly placeholder="请选择" :padding="[10,10,10,10]" size="30"
						textAlign="right" v-model="formData.priceType['text']" @click="showPriceType"></fui-input>
				</fui-form-item>
				<fui-form-item label="支付费用" labelSize="28" label-width="210rpx" v-if="formData.priceType.value === 1">
					<view style="width:540rpx;float:right;">
						<view style="float:right;padding-left:15rpx">
							<text :style="{color:(formData.priceQujian?'#000':'#ccc')}">区间</text>
							<checkbox style="transform: scale(0.7,0.7);" v-model="formData.priceQujian"
								:checked="formData.priceQujian" @click="changePriceQujian(e)"></checkbox>
						</view>
						<view style="float:right;border-right:1rpx solid #000;padding-right:5rpx;display:flex">
							<view style="width:260rpx;padding-right:10rpx;display:flex;" v-if="formData.priceQujian">
								<view>
									<fui-input type="number" size="30" v-model="formData.startPrice"
										:borderBottom="false" :padding="[10,10,10,10]" placeholder="最小金额"
										textAlign="right"></fui-input>
								</view>
								<view>~</view>
								<view>
									<fui-input type="number" size="30" v-model="formData.endPrice" :borderBottom="false"
										:padding="[10,10,10,10]" placeholder="最大金额" textAlign="right"></fui-input>
								</view>
							</view>
							<view style="width:220rpx;padding-right:10rpx" v-else>
								<fui-input type="number" size="30" v-model="formData.price" :borderBottom="false"
									:padding="[10,10,10,10]" placeholder="请输入支付金额" textAlign="right"></fui-input>
							</view>
							<view style="padding:5rpx">元</view>
							<view style="width:90rpx"><fui-input :borderBottom="false" readonly size="30"
									:padding="[10,10,10,10]" placeholder="/单位" v-model="formData.unit.text"
									@click="showUnit"></fui-input></view>
						</view>
					</view>
				</fui-form-item>
				<fui-form-item label="招募人数" labelSize="28">
					<view style="float:right;padding-left:15rpx">
						<text :style="{color:(formData.noPersonNum?'#000':'#ccc')}">不限</text>
						<checkbox style="transform: scale(0.7,0.7);" v-model="formData.noPersonNum"
							:checked="formData.noPersonNum" @click="changeNoPersonNum(e)"></checkbox>
					</view>
					<view style="float:right;border-right:1rpx solid #000;padding-right:10rpx">
						<fui-input type="number" :disabled="formData.noPersonNum" size="30" v-model="formData.PersonNum"
							:borderBottom="false" :padding="[10,5,10,10]" placeholder="请输入招募人数"
							textAlign="right"></fui-input>
					</view>
				</fui-form-item>
				<view style="padding:20rpx">通告描述</view>
				<fui-textarea size="28" maxlength="300" v-model="formData.NoticeMemo"
					:placeholder="formData.ClassMemo"></fui-textarea>
				<fui-form-item label="时间" labelSize="28">
					<fui-input v-model="formData.NoticeTimes" size="28" :borderBottom="false" :padding="[0]"
						placeholder="请输入合作时间(选填)" textAlign="right"></fui-input>
				</fui-form-item>
				<fui-form-item label="地点" labelSize="28">
					<fui-input v-model="formData.NoticeAddress" size="28" :borderBottom="false" :padding="[0]"
						placeholder="请输入合作地点(选填)" textAlign="right"></fui-input>
				</fui-form-item>
				<view style="padding:20rpx">上传图片</view>
				<view style="padding:20rpx;">
					<fui-upload immediate :sizeType="sizeType" :url="uploadUrl" :fileList="formData.uploadFiles"
						ref="upload" width="200" height="200" @success="uploadSuccess" @error="error"
						@complete="uploadComplete" Right></fui-upload>
				</view>
			</fui-form>
		</view>
		<view style="height:100rpx;"></view>
		<view class="saveBtns">
			<view style="float:left;font-size:24rpx;width:50%;padding:10rpx;color:#FF0000" v-if="isResubmit">重新提交审核
			</view>
			<view class="" v-else>
				<view style="float:left;font-size:24rpx;width:50%;padding:10rpx;color:#FF0000"
					v-if="WalletYue > WalletPrice">将消耗 {{ WalletPrice }} 金币（当前余额：{{ WalletYue }})</view>
				<view style="float:left;font-size:24rpx;width:50%;padding:10rpx;color:#FF0000" v-else
					@click="goReChange">金币余额不足，请先充值</view>
			</view>


			<view style="float:right;width:40%;">
				<fui-button background="#FFDD00" width="95%" height="60rpx" color="#000" class="saveBtn"
					@click="submitOrder">提交</fui-button>
			</view>

		</view>
		<fui-picker linkage :options="roles" :show="roleShow" @change="changeRole"
			@cancel="pickerCancel('role')"></fui-picker>
		<fui-picker linkage :options="sexs" :show="sexShow" @change="changeSex"
			@cancel="pickerCancel('sex')"></fui-picker>
		<fui-picker linkage :layer="2" :options="cityOptions" :show="cityShow" @change="changeCity"
			@cancel="pickerCancel('city')"></fui-picker>
		<fui-date-picker :show="birthdayShow" type="3" :minDate="minData" :value="minData" @change="changeBirthday"
			@cancel="pickerCancel('birthday')"></fui-date-picker>
		<fui-picker linkage :options="payPrices" :show="priceShow" @change="changePrice"
			@cancel="pickerCancel('price')"></fui-picker>
		<fui-picker linkage :options="units" :show="unitsShow" @change="changeUnit"
			@cancel="pickerCancel('unit')"></fui-picker>
		<fui-toast ref="toast"></fui-toast>
	</view>
</template>

<script>
	import moment from "@/script/moment.js"
	import cityData from "@/script/city.js"

	export default {
		data() {
			return {
				sizeType: ['compressed'],
				labelid: 0,
				uploadUrl: 'https://api.meimo.comdns.cn/common/Upload/upload?file=uniapp&type=image',
				uploadStatus: {},
				minData: moment().format("YYYY/MM/DD"),
				formData: {
					formOrder: 'notice',
					ClassID: 0,
					ClassName: '',
					ClassMemo: '',
					NoticeMemo: '',
					publicRole: {
						value: 0,
						text: '请选择要面向的身份'
					},
					cityJson: {},
					city: '',
					cityCode: [],
					NoticeEndTime: '',
					unit: {},
					sex: {
						value: -1,
						text: '不限'
					},
					priceType: {},
					price: '',
					startPrice: '',
					endPrice: '',
					PersonNum: '',
					noPersonNum: false,
					uploadFiles: [],
					priceQujian: false,
					// 不限默认为0，不限为1
					allCity: 0,
					// noticeImages: [],
					NoticeID: 0, // 如果NoticeID 为0新增， 不为0 修改
				},
				publicRoleSuo: false,
				roleShow: false,
				roles: [],
				sexShow: false,
				sexs: [{
						value: -1,
						text: '不限'
					},
					{
						value: 0,
						text: '女'
					},
					{
						value: 1,
						text: '男'
					}
				],
				units: [{
						value: 1,
						text: '/小时'
					},
					{
						value: 2,
						text: '/天'
					},
					{
						value: 3,
						text: '/单'
					},
					{
						value: 4,
						text: '/场'
					},
					{
						value: 5,
						text: '/次'
					},
				],
				unitsShow: false,
				priceShow: false,
				payPrices: [{
						value: 1,
						text: '支付费用-手动输入'
					},
					{
						value: 2,
						text: '费用协商'
					},
					{
						value: 0,
						text: '希望互免'
					},
				],
				cityShow: false,
				cityOptions: [],
				birthdayShow: false,
				isChecked: false,
				WalletPrice: 0,
				WalletYue: 0,
				isResubmit: false
			};
		},
		onLoad(options) {
			// console.log('options', options)


			if (options.NoticeID) {
				this.isResubmit = true;
				this.getNoticeDetail(options.NoticeID);
			} else {

				this.labelid = options.noid;
				this.formData.ClassID = options.noid;
				this.getFormData();
			}

			this.cityOptions = cityData.cityData

			// this.getFormData()
		},
		onShow() {

		},
		methods: {
			// 只有修改的时候会调取通告详情
			getNoticeDetail(NoticeID) {
				this.$httpost('/Notices/MyNoticeDetail', {
					NoticeID
				}).then(res => {
					// console.log('通告详情数据', res)
					if (res.code == 200) {
						this.labelid = res.data.ClassID;

						this.formData = res.data;
						this.formData.formOrder = 'notice';
						this.formData.NoticeID = res.data.NoticeID;
						this.formData.NoticeEndTime = res.data.NoticeEndTime.slice(0, 10); // 报名截止日期数据处理

						// 处理面向身份数据
						this.formData.publicRole = res.data.Roles ? JSON.parse(res.data.Roles) : '';

						if (!res.data.City) {
							this.isChecked = true;
							this.formData.allCity = 1;
							this.formData.city = '';
						} else {
							this.formData.city = res.data.City; // 面向地区数据处理
							this.formData.allCity = 0;
						}

						this.formData.cityJson = res.data.CityJson;
						this.formData.cityCode = res.data.CityCode;

						// 性别数据处理
						this.formData.sex = res.data.SexLimit ? JSON.parse(res.data.SexLimit) : '';
						// this.formData.noPersonNum = 1;

						// 是否选择了不限人数
						if (res.data.NoPersonNum) {
							this.formData.noPersonNum = true;
							this.formData.PersonNum = '';
						} else {
							this.formData.noPersonNum = false;
							this.formData.PersonNum = res.data.PersonNum;
						}

						// 通告费用数据处理
						this.formData.priceType = res.data.PriceType ? JSON.parse(res.data.PriceType) : '';

						// 当前是否是选择区间状态
						this.formData.priceQujian = !!res.data.PriceQujian;

						// 区间数据
						this.formData.endPrice = res.data.EndPrice;
						this.formData.startPrice = res.data.StartPrice;



						// 不是区间数据
						this.formData.price = res.data.Price;
						this.formData.price = res.data.Price;

						// 单位
						this.formData.unit = res.data.Unit ? JSON.parse(res.data.Unit) : '';

						// 通告图片数据处理
						this.formData.uploadFiles = res.data.NoticePics ? JSON.parse(res.data.NoticePics) : [];

						this.getFormData();
					}
				})
			},
			// handleBackButton() {
			// 	if (uni.getStorageSync('ReChargeUrl')) {

			// 		uni.navigateTo({
			// 			url: 'releasePages/pages/publicNotice'
			// 		})

			// 		uni.removeStorageSync('ReChargeUrl');

			// 	} else {
			// 		if (this.launch == 0) {
			// 			uni.navigateBack()
			// 		} else {
			// 			uni.reLaunch({url:'/pages/index/index'})
			// 		}
			// 	}
			// },
			goReChange() {
				uni.navigateTo({
					url: '/myPages/pages/reCharge'
				})
			},
			checkedChange() {
				this.isChecked = !this.isChecked
				// 如果为选中状态改为1
				if (this.isChecked) {
					this.formData.allCity = 1
					this.formData.city = ''
				}
			},
			//上传成功时触发
			uploadSuccess(e) {
				// console.log('uploadSuccess', e)
				//e.res 为服务器返回数据
				//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
				let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
				// console.log('res', res)
				this.uploadStatus = e.status
				if (res.fileName) {
					//处理结果返回给组件 
					//res.data.url为上传成功后返回的图片地址
					//e.index为图片索引值
					this.$refs.upload.result(this.$baseUrl + res.fileName, e.index)
				}
			},
			//上传失败时触发
			uploadError(e) {
				this.uploadStatus = e.status
			},
			//选择图片或上传完成时触发
			uploadComplete(e) {

				// console.log('uploadStatus', e)
				this.uploadStatus = e.status
				this.formData.uploadFiles = e.urls
				if (this.uploadStatus === 'success' && e.action === 'upload') {
					// let options = {}
					//提示信息
					// options.text = '上传完成！';
					// this.fui.toast('上传完成！')
					// this.$refs.toast.show(options)
					//已上传完成的图片列表 this.urls
					// console.log('uploadUrls', this.formData.uploadFiles)
				}
			},
			pickerCancel(type) {
				if (type == 'price') {
					this.priceShow = false
				}
				if (type == 'role') {
					this.roleShow = false
				}
				if (type == 'sex') {
					this.sexShow = false
				}
				if (type == 'birthday') {
					this.birthdayShow = false
				}
				if (type == 'city') {
					this.cityShow = false
				}
				if (type == 'unit') {
					this.unitsShow = false
				}
			},
			changePriceQujian(e) {
				this.formData.priceQujian = !this.formData.priceQujian
				// console.log(this.formData.priceQujian)
			},
			changeNoPersonNum(e) {
				this.formData.noPersonNum = !this.formData.noPersonNum
				// console.log(this.formData.noPersonNum)
				if (this.formData.noPersonNum) {
					this.formData.PersonNum = ''
				}
			},
			showUnit() {
				this.unitsShow = true
			},
			changeUnit(e) {
				this.formData.unit = e
				this.unitsShow = false
			},
			showPriceType() {
				this.priceShow = true
			},
			changePrice(e) {
				// console.log(e)
				this.formData.priceType = e
				this.priceShow = false
			},
			showSex() {
				this.sexShow = true
			},
			changeSex(item) {
				// // console.log(e)
				this.formData.sex = item
				// this.sexShow = false
			},
			showBirthday() {
				this.birthdayShow = true
			},
			changeBirthday(e) {
				// console.log(e)
				this.formData.NoticeEndTime = e.result
				this.birthdayShow = false
			},
			showRole() {
				this.roleShow = true
			},
			changeRole(e) {
				// console.log(e)
				this.formData.publicRole = e
				this.roleShow = false
			},
			showCity() {
				this.cityShow = true
			},
			changeCity(e) {
				// console.log(e)
				this.formData.cityJson = e
				this.formData.city = e.result
				this.formData.cityCode = e.value
				this.cityShow = false
				this.isChecked = false
			},
			getFormData() {
				this.$httpost('/Form/NoticeOrder', {
					'labelid': this.labelid,
					'noticeid': 0
				}).then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.formData.ClassName = res.data.publicType.LabelName
						this.formData.ClassMemo = res.data.publicType.NoticeMemo
						// console.log('res.data.roles.length', res.data.roles.length)
						if (res.data.roles.length == 1) {
							this.publicRoleSuo = true
						}

						this.roles = res.data.roles
						this.WalletYue = res.data.WalletYue
						this.WalletPrice = res.data.WalletPrice

						this.formData.publicRole = res.data.roles[0]

						// console.log('this.publicRoleSuo', this.publicRoleSuo)
					}

				})
			},
			submitOrder() {
				// this.$refs.form.validator(this.formData, rules).then(result => {
				// 	if (result.isPassed) {


				// 	}				
				// }).catch(err => {
				// 	// console.log(err)
				// })		

				if (this.WalletYue < this.WalletPrice) {
					uni.showModal({
						title: '温馨提示',
						content: '对不起，金币余额不足，请先进行充值！',
						confirmText: '去充值',
						cancelText: '取消',
						success: (res) => {
							if (res.confirm) {

								uni.setStorageSync('ReChargeUrl', '/releasePages/pages/noticeOrder?noid=' +
									this.formData.ClassID)
								this.$common.goNavPage('/myPages/pages/reCharge');

							}
							if (res.cancel) {
								return false;
							}
						}
					})
					return false;
				}


				if (!this.formData.publicRole) {
					this.$common.showToast("请选择要面向的身份！");
					return false;
				}
				// console.log('全部：',this.formData.allCity )
				// console.log('单条：',this.formData.city )
				if (this.formData.allCity == 0) {
					if (this.formData.city == "") {
						this.$common.showToast("请选择要面向的地区！");
						return false;
					}
				}


				if (this.formData.NoticeEndTime == "") {
					this.$common.showToast("请选择截止日期！");
					return false;
				}
				// if (this.formData.sex.value == "不限") {
				// 	this.$common.showToast("请选择性别要求！");
				// 	return false;
				// }

				if (JSON.stringify(this.formData.priceType) === '{}') {
					this.$common.showToast("请选择费用模式！");
					return false;
				} else {
					if (this.formData.priceType.value == 1) {
						if (this.formData.priceQujian) {
							if (this.formData.startPrice == "" || this.formData.endPrice == "") {
								this.$common.showToast("请填写费用金额！");
								return false;
							}
						} else {
							if (this.formData.price == "") {
								this.$common.showToast("请填写费用金额！");
								return false;
							}
						}

						if (JSON.stringify(this.formData.unit) === '{}') {
							this.$common.showToast("请选择费用单位！");
							return false;
						}
					}
				}
				if (this.formData.noPersonNum == false) {
					if (this.formData.PersonNum == "") {
						this.$common.showToast("请填写招募人数！");
						return false;
					}
				}

				if (this.formData.NoticeMemo == '') {
					this.$common.showToast("请填写您的通告描述！");
					return false;
				}

				// console.log('this.formData', this.formData)


				this.$httpost('/Form/submitOrder', this.formData).then(res => {
					// console.log('submitOrder:', res);
					this.$common.showToast("通告发布成功");
					setTimeout(() => {
						// this.$common.goNavPage("/myPages/pages/myTonggao");
						// isClass 0发布通告 1发布约单
						this.$common.goNavPage(
							`/myPages/pages/submitResults?isClass=0&titleName=${this.formData.ClassName? JSON.stringify(this.formData.ClassName): ''}`
						);
					}, 500)
				})
			}
		}
	}
</script>

<style lang="scss">
	.sexLabel {
		float: right;
		width: 100rpx;
		height: 50rpx;
		margin: 10rpx;
		padding: 5rpx;
		text-align: center;
		line-height: 50rpx;
		background-color: #f0f0f0;
		border-radius: 10rpx;
	}

	.saveBtns {
		width: 100vw;
		height: 80rpx;
		padding: 10rpx;
		position: fixed;
		z-index: 100;
		bottom: 0rpx;
		background-color: #FFF;
		border-top: 1rpx solid #e0e0e0
	}

	.saveBtn {
		margin: auto;
	}
</style>